Elemente de pagina (partea 3)
In meniurile clasice nu este nici estetic si nici nu este suficient spatiu pentru a da un nume suficient de mare care sa explice continutul paginilor din spatele link-urilor.
Acest tip de meniu ofera posibilitatea de a atasa o descriere scurta, sau chiar o imagine, link-urior pe care le cuprinde, aceasta descriere fiind afisata in locul pe care-l doriti, atunci cand trec cu mouse-ul peste butoanele meniului.
Pentru a realiza acest meniu trebuie sa folosim HTML, CSS si Javascript. Pentru ca nu este un cod foarte mare, nu vom folosi fisiere javascript si css externe. Il vom pune intr-un singur fisier HTML. Eu i-am zis Meniu.html .
Vom lucra cu id-uri css, iar id-ul css pentru elementul html va fi folosit de javascript pentru a afisa descrierea link-ului.
Codul este urmatorul:
| <style type="text/css"> #meniu{ border: 1px solid black; width: 156px; background-color: #663399; } #meniu a{ font: bold 13px arial; padding: 2px; padding-left: 4px; display: block; width: 100%; color: black; text-decoration: none; border-bottom: 1px solid black; } html>body #meniu a{ width: auto; } #meniu a:hover{ background-color: black; color: white; } #descriere{ padding: 2px; color: #FF0000; } </style> <script type="text/javascript"> function showtext(descrierea){ if (!document.getElementById) return document.getElementById("descriere").innerHTML=descrierea } function sterge() { document.getElementById("descriere").innerHTML="" } </script> <div id="meniu"> <a href="http://www,etutoriale.tutorialehtml.com" onMouseover="showtext('Tutoriale Web Design Gratuite')" onMouseout="sterge()">Tutoriale Web Design</a> <a href="http://www.etutoriale.tutorialehtml.com" onMouseover="showtext('Tutorial complet JavaScript si alte scripturi utile')" onMouseout="sterge()">Tutoriale JavaScript</a> <a href="http://www.etutoriale.tutorialehtml.com" onMouseover="showtext('Tutoriale si scripturi PHP Gratuite')" onMouseout="sterge()">Tutoriale PHP</a> <a href="http://www.tutorialehtml.com" onMouseover="showtext('<img src=imagine1.jpg width=156 height=90>')" onMouseout="sterge()">Imagine proba 1</a> <a href="http://www.tutorialehtml.com" onMouseover="showtext('<img src=imagine2.jpg width=156 height=90>')" onMouseout="sterge()">imagine proba 2</a> </div> <p id="descriere"></p> |
Exemplu
Descrierile, cele scrise cu alb, vor fi afisate intr-un paragraf. Puteti sa afisati in orice obiect html atata timp cat acesta are id-ul descriere. In locul descrierilor text puteti sa folositi o imagine. Trebuie doar sa introduceti tag-ul pentru imagine si calea acesteia, asa cum am facut la ultimele doua link-uri din meniu.
Am folosit doua functii javascript:
- una este chemata atunci cand mouse-ul este peste un element din meniu ( showtext() ) si afiseaza textul dintre paranteze acolo unde intalneste id-ul descriere.
- a doua functie este chemata atunci cand mouse-ul nu mai este peste meniu ( sterge() ) si sterge text-ul afisat de prima.
Acest articol face parte dintr-o serie de 3 articole:
» Elemente de pagina (partea 1)
» Elemente de pagina (partea 2)
» Elemente de pagina (partea 3)
Articole asemanatoare
» Elemente de pagina (partea 1)
» Elemente de pagina (partea 2)
» Bara reprezentare procent - PHP + CSS
Comentarii
JohnB
Chiar merge! Un exemplu tare de HTML, CSS, javascript care m-a invatat sa adaug descriere la link-urile din meniu. Foarte util pentru un meniu de blog. Multumesc
Chiar merge! Un exemplu tare de HTML, CSS, javascript care m-a invatat sa adaug descriere la link-urile din meniu. Foarte util pentru un meniu de blog. Multumesc
14-May-2010 - 19:24
Babycu
Imi puteti spune cum pun acest meniu pe Orizontal?
Imi puteti spune cum pun acest meniu pe Orizontal?
24-May-2010 - 17:26
cristian
Modifica in CSS proprietatile astfel (restul lasa cum e):
#meniu{
margin:0 auto;
float:left;
border: 1px solid black;
background-color: #663399;
}
#meniu a{
float:left;
font: bold 13px arial;
padding: 2px;
padding-left: 4px;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}
Modifica in CSS proprietatile astfel (restul lasa cum e):
#meniu{
margin:0 auto;
float:left;
border: 1px solid black;
background-color: #663399;
}
#meniu a{
float:left;
font: bold 13px arial;
padding: 2px;
padding-left: 4px;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}
24-May-2010 - 20:35
Cristi1984
Salut, cum pot face sa se schimbe culoarea cand pun mouse-ul peste buton ?Multumesc anticipat!
Salut, cum pot face sa se schimbe culoarea cand pun mouse-ul peste buton ?Multumesc anticipat!
30-Jun-2011 - 17:46
ionel
din CSS - cu hover
De obicei se foloseste pentru link-uri. Daca butonul e link trebuie sa pui comanda penru acel link.
#idul a:hover {
color: #000000
}
asta l-ar face negru cand treci cu mouse-ul peste/
din CSS - cu hover
De obicei se foloseste pentru link-uri. Daca butonul e link trebuie sa pui comanda penru acel link.
#idul a:hover {
color: #000000
}
asta l-ar face negru cand treci cu mouse-ul peste/
03-Jul-2011 - 22:41
Valy
pentru meniu nu putem face niste jpg uri si apoi sa le adaugam ancora?
pentru meniu nu putem face niste jpg uri si apoi sa le adaugam ancora?
24-Jul-2011 - 21:04
Cristian
Ba putem. Dar asta fac doar incepatorii.
Ba putem. Dar asta fac doar incepatorii.
26-Jul-2011 - 10:24
Voteaza acest articol!
Trimite un comentariu!
